<template>
  <div class="base-page">
      <CommonCustomNavHead title="测评" prePage="/pages/index/main" />
      <div class="appraisal-wrap">
        <view class="header">
        <text class="title">测评进度</text>
        <div class="schedule-wrap">
            <div class="plan" :style="{ width: `${(step/12) * 100}%` }"></div>
        </div>
        <text class="progress">{{step}}/12</text>
        </view>

        <div class="content-wrap">
        <div class="content-avatar-wrap">
            <div class="avatar-wrap">
            <img src="https://www.thuguardian.com/files/small_program/avatar-question.png" alt="">
            </div>
            <div class="content-message-wrap">
            <div>
                {{step}}.{{curStepData.title}}
            </div>
            </div>
        </div>

        <div class="select-wrap">
					<div v-for="(val, idx) in curStepData.select" :key="idx">
						<div v-if="!val.prop" class="select-item-wrap" :class="val.is_selected ? 'active' : ''" @click="handleOpen(val, idx, curStepData.select)">
							<van-radio-group v-if="val.type == 'radio'" :value="val.is_selected">
								<van-radio  class="agreement-radio" checked-color="#00AFCB"  :name="1">{{val.title}}</van-radio>
							</van-radio-group>
							<van-checkbox v-else-if="val.type == 'check' || val.type == 'check-input'" :value="val.is_selected" shape="square" :name="1">{{val.title}}</van-checkbox>
							<span v-else>{{val.title}}</span>
						</div>
						<input 
							v-if="val.type == 'check-input' && val.is_selected == 1"
							class="input-field"
							placeholder="请输入"
              v-model="val.value"
							@input="(e) => handleInputChange(e, val)"
						/>
						<div v-if="val.prop == 'weight'" class="input-wrap">
              <input 
								class="input-field"
								placeholder="请输入"
								type="digit"
                v-model="val.value"
								maxlength="6"
								@input="(e) => handleInputChange(e, val, curStepData.select)"
							/>
							<span class="kg">kg</span>
						</div>
					</div>
        </div>
				<div class="btn-wrap-box">
					<div class="btn-wrap">
						<!-- <button @click="handlePrev" class="btn" :class="{'mini-btn': curStepData.btn.length == 2}" v-if="curStepData.btn.includes('prev')">上一步</button>
						<button @click="handleNext" class="btn mini-btn" v-if="curStepData.btn.includes('next')">下一步</button> -->

						<button @click="handlePrev" class="btn mini-btn">上一步</button>
						<button @click="handleNext" class="btn mini-btn">下一步</button>
					</div>
				</div>
        </div>
    </div>
  </div>
</template>

<script>
import CommonCustomNavHead from '@/components/CommonCustomNavHead/index.vue';
import { saveInfo } from '@/api/common/index.js'
export default {
	components: {
		CommonCustomNavHead
  },
  data() {
    return {
			testInfo: {},
      step: 1,
      questionnaire:[
          {
              "title":"过去的一周，您是否有难以入睡的情况？（如入睡困难、频繁醒来、早醒等）",
							"btn": ['prev'],
							"type": 'radio',
              "select":[
                  {
                      "title":"是",
                      "is_selected":0, // 选中是1
                      "value":"", // title 是其他的时候需要填写的内容
                  },
                  {
                      "title":"否",
                      "is_selected":0, // 未选中是0
                  }
              ]
          },
          {
              "title":"过去的一周，您是否有嗜睡的情况？（如白天容易犯困、总是想睡觉等）",
							"btn": ['prev'],
							"type": 'radio',
              "select":[
                  {
                      "title":"是",
                      "is_selected":0, // 选中是1
                      "value":"", // title 是其他的时候需要填写的内容
                  },
                  {
                      "title":"否",
                      "is_selected":0, // 未选中是0
                  }
              ]
          },
          {
              "title":"过去的一周，您是否感到休息不足或难以平静休息？",
							"btn": ['prev'],
							"type": 'radio',
              "select":[
                  {
                      "title":"是",
                      "is_selected":0, // 选中是1
                      "value":"", // title 是其他的时候需要填写的内容
                  },
                  {
                      "title":"否",
                      "is_selected":0, // 未选中是0
                  }
              ]
          },
          {
              "title":"过去的一周，您在进食时是否有吞咽困难？",
							"btn": ['prev'],
							"type": 'radio',
              "select":[
                  {
                      "title":"没有困难",
                      "is_selected":0, // 选中是1
                      "value":"", // title 是其他的时候需要填写的内容
                  },
                  {
                      "title":"有些困难",
                      "is_selected":0, // 未选中是0
                  },
                  {
                      "title":"较为困难",
                      "is_selected":0, // 未选中是0
                  },
                  {
                      "title":"非常困难",
                      "is_selected":0, // 未选中是0
                  }
              ]
          },
          {
              "title":"您现在的体重是多少？",
							"btn": ['prev', 'next'],
							"type": 'radio',
              "select":[
                  {
											"prop": "weight",
                      "title":"",
                      "is_selected":0, // 选中是1
                      "value":"", // title 是其他的时候需要填写的内容
                  },
                  {
                      "title":"不知道",
											"type": 'radio',
                      "is_selected":0, // 未选中是0
                  }
              ]
          },
          {
              "title":"过去的一周，您是否经历过疼痛？",
							"btn": ['prev'],
							"type": 'radio',
              "select":[
                  {
                      "title":"没有疼痛",
                      "is_selected":0, // 选中是1
                      "value":"", // title 是其他的时候需要填写的内容
                  },
                  {
                      "title":"轻微疼痛",
                      "is_selected":0, // 未选中是0
                  },
                  {
                      "title":"中度疼痛",
                      "is_selected":0, // 未选中是0
                  },
                  {
                      "title":"严重疼痛",
                      "is_selected":0, // 未选中是0
                  }
              ]
          },
          {
              "title":"过去的一周，您的心情如何？",
							"btn": ['prev'],
							"type": 'radio',
              "select":[
                  {
                      "title":"情绪稳定，心情愉快",
                      "is_selected":0, // 选中是1
                      "value":"", // title 是其他的时候需要填写的内容
                  },
                  {
                      "title":"偶尔感到焦虑或低落",
                      "is_selected":0, // 未选中是0
                  },
                  {
                      "title":"经常感到焦虑或低落",
                      "is_selected":0, // 未选中是0
                  },
                  {
                      "title":"持续感到严重的焦虑或抑郁",
                      "is_selected":0, // 未选中是0
                  }
              ]
          },
          {
              "title":"过去的一周，您常外出参加活动或和熟人见面吗？",
							"btn": ['prev'],
							"type": 'radio',
              "select":[
                  {
                      "title":"经常",
                      "is_selected":0, // 选中是1
                      "value":"", // title 是其他的时候需要填写的内容
                  },
                  {
                      "title":"有时",
                      "is_selected":0, // 未选中是0
                  },
                  {
                      "title":"很少",
                      "is_selected":0, // 未选中是0
                  },
                  {
                      "title":"从不",
                      "is_selected":0, // 未选中是0
                  }
              ]
          },
          {
              "title":"过去的一周，您是否按医嘱服用了所有处方药（即医生开的药）？",
							"btn": ['prev'],
							"type": 'radio',
              "select":[
                  {
                      "title":"没有使用处方药（即医生开的药）",
                      "is_selected":0, // 选中是1
                      "value":"", // title 是其他的时候需要填写的内容
                  },
                  {
                      "title":"总是按时按量服用",
                      "is_selected":0, // 未选中是0
                  },
                  {
                      "title":"偶尔忘记服用或没有按量服用",
                      "is_selected":0, // 未选中是0
                  },
                  {
                      "title":"经常忘记服用或自行调整剂量",
                      "is_selected":0, // 未选中是0
                  },
                  {
                      "title":"很少或从不按医嘱服用",
                      "is_selected":0, // 未选中是0
                  },
              ]
          },
          {
              "title":"过去的一周，您是否发生过跌倒或差点跌倒的情况？",
							"btn": ['prev'],
							"type": 'radio',
              "select":[
                  {
                      "title":"没有",
                      "is_selected":0, // 选中是1
                      "value":"", // title 是其他的时候需要填写的内容
                  },
                  {
                      "title":"差点跌倒",
                      "is_selected":0, // 未选中是0
                  },
                  {
                      "title":"跌倒一次",
                      "is_selected":0, // 未选中是0
                  },
                  {
                      "title":"跌倒多次",
                      "is_selected":0, // 未选中是0
                  }
              ]
          },
          {
              "title":"您目前是否得到以下照料或帮助？(可多选)",
							"btn": ['prev', 'next'],
							"type": 'check',
              "select":[
                  {
                      "title":"不需要帮助，可以自理",
											"type": 'check',
                      "is_selected":0, // 选中是1
                  },
                  {
                      "title":"得到家人的照料或帮助",
											"type": 'check',
                      "is_selected":0, // 未选中是0
                  },
                  {
                      "title":"得到保姆或相关行业派遣的服务人员提供的照料或帮助",
											"type": 'check',
                      "is_selected":0, // 未选中是0
                  },
                  {
                      "title":"在养老院得到照料或帮助",
											"type": 'check',
                      "is_selected":0, // 未选中是0
                  },
                  {
                      "title":"其他（请说明）",
											"type": "check-input",
                      "is_selected":0, // 未选中是0
                      "value":""
                  }
              ]
          },
          {
              "title":"过去的一周，您的整体健康状况如何？",
							"btn": ['prev'],
							"type": 'radio',
              "select":[
                  {
                      "title":"很好",
                      "is_selected":0, // 选中是1
                  },
                  {
                      "title":"较好",
                      "is_selected":0, // 未选中是0
                  },
                  {
                      "title":"一般",
                      "is_selected":0, // 未选中是0
                  },
                  {
                      "title":"较差",
                      "is_selected":0, // 未选中是0
                  },
                  {
                      "title":"很差",
                      "is_selected":0, // 未选中是0
                  }
              ]
          },
      ],
      weight: ''
    }
  },
  computed: {
    curStepData() {
      return this.questionnaire[this.step - 1]
    }
  },
	onShow() {
		const info = wx.getStorageSync('testInfo')
		if (info) {
			this.testInfo = JSON.parse(info)
		}
	},
  methods: {
    handleOpen(val, idx, arr) {
			if (val.type == 'radio' || val.type == 'check' || val.type == 'check-input') {
        if (this.curStepData.title == '您现在的体重是多少？') {
          const select = arr?.map(v => {
            v.is_selected = 0
            v.value = ''
            return v
          })
          arr = select
        }
				const value = val.is_selected == 1 ? 0 : 1
				this.$set(val, 'is_selected', value)
				return
			}
      if (this.curStepData.type === 'radio' && this.step < 12) {
				// this.step += 1
        const select = arr?.map(v => {
          v.is_selected = 0
          return v
        })
        arr = select
				this.$set(val, 'is_selected', '1')
				// wx.navigateTo({
				// 	url: `/pages/result-info/main?taskId=${4}`
				// })

        const that = this
        setTimeout(() =>{
          that.step += 1
        }, 200)
			}

			if (this.step == 12) {
				this.$set(val, 'is_selected', '1')
				this.handleSaveInfo()
				// 请求接口
			}
    },
		async handleSaveInfo() {
			const res = await saveInfo({
				...this.testInfo,
				questionnaire: this.questionnaire
			})

			if (res.code === 200) {
				uni.showToast({ title: res.msg, icon: 'success' })
				// wx.navigateTo({
				// 	url: `/pages/result-info/main?taskId=${res.data}`
				// })
        uni.reLaunch({ url: `/pages/result-info/main?taskId=${res.data}` });
			}
		},
		handlePrev() {
			if (this.step > 1) {
				this.step -= 1
			} else {
				wx.navigateBack({
					delta: 1
				})
			}
		},
		handleNext() {
      if (!this.curStepData.select.some(v => v.is_selected ==1)) {
				uni.showToast({ title: '请选择选项再执行下一步', icon: 'none' })
        return false
      }
      if (this.curStepData.title == '您目前是否得到以下照料或帮助？' && this.curStepData.select.find(v => (v.type == 'check-input' && v.is_selected == 1 && !v.value))) {
        uni.showToast({ title: '请输入其他内容', icon: 'none' })
        return false
      }
      if (this.curStepData.title == '您现在的体重是多少？' && this.curStepData.select.find(v => (v.prop == 'weight' && !/^\d*(\.\d{0,2})?$/.test(v.value)))) {
        uni.showToast({
          title: '请输入有效的体重，最多两位小数。',
          icon: 'none',
        });
        return false
      }
      const that = this
      setTimeout(() =>{
        that.step += 1
      }, 200)
			// this.step += 1
		},
    handleInputChange(e, val, arr) {
      const res = e.detail.value
      if (val.prop == 'weight' && e.detail.value) {
        const select = arr?.map(v => {
          v.is_selected = v.type == 'radio' ? 0 : 1
          return v
        })
        arr = select
        if (!/^\d*(\.\d{0,2})?$/.test(res)) {
          uni.showToast({
            title: '请输入有效的体重，最多两位小数。',
            icon: 'none',
          });
        }
      }
      this.$set(val, 'value', e.detail.value)
    }
  }
}
</script>

<style lang="less" scoped>
.appraisal-wrap {
  height: 100vh;
  background: radial-gradient(228.93% 180.92% at -21.2% -33.73%, #A0F2FF 0%, #00AFCB 67.61%);
  padding-top: 90px;
  box-sizing: border-box;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    box-sizing: border-box;
    
    .title {
      font-size: 14px;
      color: #fff;
    }

    .schedule-wrap {
      width: 186px;
      height: 8px;
      border-radius: 8px;
      background: #0AAEC8;
      .plan {
        height: 100%;
        border-radius: 8px;
        background: #ACEFFA;
      }
    }
    
    .progress {
      font-size: 14px;
      color: #fff;
    }
  }
}

.content-wrap {
  height: calc(100vh - 118px);
  margin-top: 10px;
  background: #fff;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding: 32px 30px;
  box-sizing: border-box;

  .content-avatar-wrap {
    display: flex;
    .avatar-wrap {
      width: 40px;
      height: 40px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .select-wrap {
    margin-top: 37px;
    .select-item-wrap {
      padding: 12px 15px;
      background: #E5FAF7;
      border-radius: 10px;
      color: rgba(0, 0, 0, 0.65);
      font-family: "PingFang SC";
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px;
      margin-bottom: 16px;

      &.active {
        border: 1px solid #00AFCB;
      }
    }
  }

  .content-message-wrap {
    position: relative;
    width: 257px;
    border-radius: 10px;
    border: 1px solid #ACEFFA;
    margin-left: 20px;
    padding: 12px;
    box-sizing: border-box;
    color: rgba(0, 0, 0, 0.85);
    font-family: "PingFang SC";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 2px;
    background: #E5FAF7;
  }
}

.btn-wrap-box {
	position: fixed;
	bottom: 40px;
	width: 315px;
	height: 48px;
	line-height: 48px;
	left: 50%;
	transform: translate(-50%, 0);
}

.btn-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.btn {
	width: 100%;
	border-radius: 8px;
	border: 1px solid #00AFCB;
	background: #FFF;
	color: #00AFCB;
	text-align: center;
	font-family: "PingFang SC";
	font-size: 20px;
	font-style: normal;
	font-weight: bold;
}

.mini-btn {
	width: 144px;
}

.input-wrap {
	position: relative;
	.kg {
		position: absolute;
		right: 16px;
		top: 50%;
		transform: translate(0, -50%);
	}
}

.input-field {
	width: 100%;
	height: 48px;
	border: 1px solid rgba(0, 0, 0, 0.10);
	border-radius: 8px;
	padding: 0 16px;
	box-sizing: border-box;
	margin-bottom: 16px;
}
</style>